/* stylelint-disable selector-class-pattern */
:root.custom_theme {
    #{getCssVarName(red, 0)}: 108, 9, 11;
    #{getCssVarName(red, 1)}: 144, 17, 16;
    #{getCssVarName(red, 2)}: 180, 32, 25;
    #{getCssVarName(red, 3)}: 215, 51, 36;
    #{getCssVarName(red, 4)}: 251, 73, 50;
    #{getCssVarName(red, 5)}: 252, 114, 90;
    #{getCssVarName(red, 6)}: 253, 153, 131;
    #{getCssVarName(red, 7)}: 253, 190, 172;
    #{getCssVarName(red, 8)}: 254, 224, 213;
    #{getCssVarName(red, 9)}: 255, 243, 239;
    #{getCssVarName(pink, 0)}: 92, 7, 48;
    #{getCssVarName(pink, 1)}: 128, 14, 65;
    #{getCssVarName(pink, 2)}: 164, 23, 81;
    #{getCssVarName(pink, 3)}: 199, 34, 97;
    #{getCssVarName(pink, 4)}: 235, 47, 113;
    #{getCssVarName(pink, 5)}: 239, 86, 134;
    #{getCssVarName(pink, 6)}: 243, 126, 159;
    #{getCssVarName(pink, 7)}: 247, 168, 188;
    #{getCssVarName(pink, 8)}: 251, 211, 220;
    #{getCssVarName(pink, 9)}: 253, 238, 241;
    #{getCssVarName(purple, 0)}: 74, 16, 97;
    #{getCssVarName(purple, 1)}: 94, 23, 118;
    #{getCssVarName(purple, 2)}: 115, 31, 138;
    #{getCssVarName(purple, 3)}: 137, 40, 159;
    #{getCssVarName(purple, 4)}: 160, 51, 179;
    #{getCssVarName(purple, 5)}: 181, 83, 194;
    #{getCssVarName(purple, 6)}: 202, 120, 209;
    #{getCssVarName(purple, 7)}: 221, 160, 225;
    #{getCssVarName(purple, 8)}: 239, 206, 240;
    #{getCssVarName(purple, 9)}: 247, 235, 247;
    #{getCssVarName(violet, 0)}: 64, 27, 119;
    #{getCssVarName(violet, 1)}: 76, 36, 140;
    #{getCssVarName(violet, 2)}: 88, 46, 160;
    #{getCssVarName(violet, 3)}: 100, 57, 181;
    #{getCssVarName(violet, 4)}: 114, 70, 201;
    #{getCssVarName(violet, 5)}: 136, 101, 212;
    #{getCssVarName(violet, 6)}: 162, 136, 223;
    #{getCssVarName(violet, 7)}: 190, 173, 233;
    #{getCssVarName(violet, 8)}: 221, 212, 244;
    #{getCssVarName(violet, 9)}: 241, 238, 250;
    #{getCssVarName(indigo, 0)}: 23, 30, 101;
    #{getCssVarName(indigo, 1)}: 32, 41, 122;
    #{getCssVarName(indigo, 2)}: 41, 54, 142;
    #{getCssVarName(indigo, 3)}: 52, 68, 163;
    #{getCssVarName(indigo, 4)}: 64, 83, 183;
    #{getCssVarName(indigo, 5)}: 95, 113, 197;
    #{getCssVarName(indigo, 6)}: 129, 145, 212;
    #{getCssVarName(indigo, 7)}: 167, 180, 226;
    #{getCssVarName(indigo, 8)}: 209, 216, 241;
    #{getCssVarName(indigo, 9)}: 237, 239, 248;
    #{getCssVarName(blue, 0)}: 5, 49, 112;
    #{getCssVarName(blue, 1)}: 10, 70, 148;
    #{getCssVarName(blue, 2)}: 19, 92, 184;
    #{getCssVarName(blue, 3)}: 29, 117, 219;
    #{getCssVarName(blue, 4)}: 41, 144, 255;
    #{getCssVarName(blue, 5)}: 84, 169, 255;
    #{getCssVarName(blue, 6)}: 127, 193, 255;
    #{getCssVarName(blue, 7)}: 169, 215, 255;
    #{getCssVarName(blue, 8)}: 212, 236, 255;
    #{getCssVarName(blue, 9)}: 239, 248, 255;
    #{getCssVarName(light, blue, 0)}: 0, 55, 97;
    #{getCssVarName(light, blue, 1)}: 0, 77, 133;
    #{getCssVarName(light, blue, 2)}: 3, 102, 169;
    #{getCssVarName(light, blue, 3)}: 10, 129, 204;
    #{getCssVarName(light, blue, 4)}: 19, 159, 240;
    #{getCssVarName(light, blue, 5)}: 64, 180, 243;
    #{getCssVarName(light, blue, 6)}: 110, 200, 246;
    #{getCssVarName(light, blue, 7)}: 157, 220, 249;
    #{getCssVarName(light, blue, 8)}: 206, 238, 252;
    #{getCssVarName(light, blue, 9)}: 235, 248, 254;
    #{getCssVarName(cyan, 0)}: 4, 52, 61;
    #{getCssVarName(cyan, 1)}: 7, 79, 92;
    #{getCssVarName(cyan, 2)}: 10, 108, 123;
    #{getCssVarName(cyan, 3)}: 14, 137, 153;
    #{getCssVarName(cyan, 4)}: 19, 168, 184;
    #{getCssVarName(cyan, 5)}: 56, 187, 198;
    #{getCssVarName(cyan, 6)}: 98, 205, 212;
    #{getCssVarName(cyan, 7)}: 145, 223, 227;
    #{getCssVarName(cyan, 8)}: 198, 239, 241;
    #{getCssVarName(cyan, 9)}: 231, 247, 248;
    #{getCssVarName(teal, 0)}: 2, 60, 57;
    #{getCssVarName(teal, 1)}: 4, 90, 85;
    #{getCssVarName(teal, 2)}: 7, 119, 111;
    #{getCssVarName(teal, 3)}: 10, 149, 136;
    #{getCssVarName(teal, 4)}: 14, 179, 161;
    #{getCssVarName(teal, 5)}: 51, 194, 176;
    #{getCssVarName(teal, 6)}: 94, 209, 193;
    #{getCssVarName(teal, 7)}: 142, 225, 211;
    #{getCssVarName(teal, 8)}: 196, 240, 232;
    #{getCssVarName(teal, 9)}: 230, 247, 244;
    #{getCssVarName(green, 0)}: 18, 60, 25;
    #{getCssVarName(green, 1)}: 28, 90, 37;
    #{getCssVarName(green, 2)}: 39, 119, 49;
    #{getCssVarName(green, 3)}: 50, 149, 61;
    #{getCssVarName(green, 4)}: 62, 179, 73;
    #{getCssVarName(green, 5)}: 93, 194, 100;
    #{getCssVarName(green, 6)}: 127, 209, 132;
    #{getCssVarName(green, 7)}: 166, 225, 168;
    #{getCssVarName(green, 8)}: 208, 240, 209;
    #{getCssVarName(green, 9)}: 236, 247, 236;
    #{getCssVarName(light, green, 0)}: 38, 61, 19;
    #{getCssVarName(light, green, 1)}: 59, 92, 29;
    #{getCssVarName(light, green, 2)}: 81, 123, 40;
    #{getCssVarName(light, green, 3)}: 103, 153, 52;
    #{getCssVarName(light, green, 4)}: 127, 184, 64;
    #{getCssVarName(light, green, 5)}: 151, 198, 95;
    #{getCssVarName(light, green, 6)}: 176, 212, 129;
    #{getCssVarName(light, green, 7)}: 201, 227, 167;
    #{getCssVarName(light, green, 8)}: 228, 241, 209;
    #{getCssVarName(light, green, 9)}: 243, 248, 237;
    #{getCssVarName(lime, 0)}: 49, 70, 3;
    #{getCssVarName(lime, 1)}: 75, 105, 5;
    #{getCssVarName(lime, 2)}: 103, 141, 9;
    #{getCssVarName(lime, 3)}: 132, 176, 12;
    #{getCssVarName(lime, 4)}: 162, 211, 17;
    #{getCssVarName(lime, 5)}: 174, 220, 58;
    #{getCssVarName(lime, 6)}: 189, 229, 102;
    #{getCssVarName(lime, 7)}: 207, 237, 150;
    #{getCssVarName(lime, 8)}: 229, 246, 201;
    #{getCssVarName(lime, 9)}: 243, 251, 233;
    #{getCssVarName(yellow, 0)}: 84, 73, 3;
    #{getCssVarName(yellow, 1)}: 126, 108, 6;
    #{getCssVarName(yellow, 2)}: 168, 142, 10;
    #{getCssVarName(yellow, 3)}: 210, 175, 15;
    #{getCssVarName(yellow, 4)}: 252, 206, 20;
    #{getCssVarName(yellow, 5)}: 253, 222, 67;
    #{getCssVarName(yellow, 6)}: 253, 235, 113;
    #{getCssVarName(yellow, 7)}: 254, 245, 160;
    #{getCssVarName(yellow, 8)}: 254, 251, 208;
    #{getCssVarName(yellow, 9)}: 255, 254, 236;
    #{getCssVarName(amber, 0)}: 81, 46, 9;
    #{getCssVarName(amber, 1)}: 121, 75, 15;
    #{getCssVarName(amber, 2)}: 161, 107, 22;
    #{getCssVarName(amber, 3)}: 202, 143, 30;
    #{getCssVarName(amber, 4)}: 242, 183, 38;
    #{getCssVarName(amber, 5)}: 245, 202, 80;
    #{getCssVarName(amber, 6)}: 247, 219, 122;
    #{getCssVarName(amber, 7)}: 250, 234, 166;
    #{getCssVarName(amber, 8)}: 252, 246, 210;
    #{getCssVarName(amber, 9)}: 254, 251, 237;
    #{getCssVarName(orange, 0)}: 85, 31, 3;
    #{getCssVarName(orange, 1)}: 128, 53, 6;
    #{getCssVarName(orange, 2)}: 170, 80, 10;
    #{getCssVarName(orange, 3)}: 213, 111, 15;
    #{getCssVarName(orange, 4)}: 255, 146, 20;
    #{getCssVarName(orange, 5)}: 255, 174, 67;
    #{getCssVarName(orange, 6)}: 255, 199, 114;
    #{getCssVarName(orange, 7)}: 255, 221, 161;
    #{getCssVarName(orange, 8)}: 255, 239, 208;
    #{getCssVarName(orange, 9)}: 255, 249, 237;
    #{getCssVarName(grey, 0)}: 28, 31, 35;
    #{getCssVarName(grey, 1)}: 46, 50, 56;
    #{getCssVarName(grey, 2)}: 65, 70, 76;
    #{getCssVarName(grey, 3)}: 85, 91, 97;
    #{getCssVarName(grey, 4)}: 107, 112, 117;
    #{getCssVarName(grey, 5)}: 136, 141, 146;
    #{getCssVarName(grey, 6)}: 167, 171, 176;
    #{getCssVarName(grey, 7)}: 198, 202, 205;
    #{getCssVarName(grey, 8)}: 230, 232, 234;
    #{getCssVarName(grey, 9)}: 204, 204, 204;
    #{getCssVarName(blue, cyan, 0)}: 217, 236, 255;
    #{getCssVarName(blue, cyan, 1)}: 164, 201, 238;
    #{getCssVarName(blue, cyan, 2)}: 131, 171, 212;
    #{getCssVarName(blue, cyan, 3)}: 105, 148, 190;
    #{getCssVarName(blue, cyan, 4)}: 85, 125, 165;
    #{getCssVarName(blue, cyan, 5)}: 70, 107, 144;
    #{getCssVarName(blue, cyan, 6)}: 48, 81, 115;
    #{getCssVarName(blue, cyan, 7)}: 36, 65, 96;
    #{getCssVarName(blue, cyan, 8)}: 26, 52, 79;
    #{getCssVarName(blue, cyan, 9)}: 16, 41, 68;
    #{getCssVarName(white)}: 255, 255, 255;
    #{getCssVarName(black)}: 0, 0, 0;

    // 功能色
    #{getCssVarName(color, white)}: rgba(var(#{getCssVarName(white)}),1); // 浅色模式下深色背景内容Inverse
    #{getCssVarName(color, black)}: rgba(var(#{getCssVarName(black)}),1); // 深色模式下浅色背景内容Inverse

    // 主要颜色
    #{getCssVarName(color, primary)}: rgb(4 57 94 / 100%); // 主要颜色。仅在需要非常强调的情况下使用。
    #{getCssVarName(color, primary, text)}: rgb(255 255 255 / 100%); // 主要颜色文字色，和背景色形成对比
    #{getCssVarName(color, primary, hover)}: rgb(42 45 46 / 100%); // 主要颜色悬浮态
    #{getCssVarName(color, primary, hover, text)}: rgb(204 204 204 / 100%); // 主要颜色文字色，和背景色形成对比
    #{getCssVarName(color, primary, active)}: rgba(55 55 61 / 100%); // 主要颜色激活态
    #{getCssVarName(color, primary, active, text)}: rgb(204 204 204 / 100%); // 主要颜色文字色，和背景色形成对比
    #{getCssVarName(color, primary, disabled)}: rgba(204 204 204 / 50%); // 主要颜色禁用态
    #{getCssVarName(color, primary, disabled, text)}: rgba(204 204 204 / 50%); // 主要颜色文字色，和背景色形成对比
    #{getCssVarName(color, primary, light, default)}: rgb(12 88 129); // 浅版主要颜色（多用于背景）。仅在需要非常强调的情况下使用。
    #{getCssVarName(color, primary, light, hover)}: rgb(11 113 181); // 浅版主要颜色悬浮态
    #{getCssVarName(color, primary, light, active)}: rgb(0 127 212 / 100%); // 浅版主要颜色激活态

    // 次要颜色
    #{getCssVarName(color, secondary)}: rgba(var(#{getCssVarName(light, blue, 5)}), 1); // 次要颜色。强调作用次于主要颜色，但仍然具有强调作用。
    #{getCssVarName(color, secondary, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
    #{getCssVarName(color, secondary, hover)}: rgba(var(#{getCssVarName(light, blue, 6)}), 1); // 次要颜色悬浮态
    #{getCssVarName(color, secondary, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
    #{getCssVarName(color, secondary, active)}: rgba(var(#{getCssVarName(light, blue, 7)}), 1); // 次要颜色激活态
    #{getCssVarName(color, secondary, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
    #{getCssVarName(color, secondary, disabled)}: rgba(var(#{getCssVarName(light, blue, 2)}), 1); // 次要颜色禁用态
    #{getCssVarName(color, secondary, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
    #{getCssVarName(color, secondary, light, default)}: rgba(var(#{getCssVarName(light, blue, 5) }),.2); // 浅版次要颜色（多用于背景）。强调作用次于主要颜色，但仍然具有强调作用。
    #{getCssVarName(color, secondary, light, hover)}: rgba(var(#{getCssVarName(light, blue, 5) }),.3); // 浅版次要颜色悬浮态
    #{getCssVarName(color, secondary, light, active)}: rgba(var(#{getCssVarName(light, blue, 5) }),.4); // 浅版次要颜色激活态

    // 第三颜色
    #{getCssVarName(color, tertiary)}: rgba(var(#{getCssVarName(grey, 5)}), 1); // 第三颜色，可以在页面上多次使用
    #{getCssVarName(color, tertiary, text)}: rgba(var(#{getCssVarName(white)}), 1); // 第三颜色文字色，和背景色形成对比
    #{getCssVarName(color, tertiary, hover)}: rgba(var(#{getCssVarName(grey, 6)}), 1); // 第三颜色悬浮态
    #{getCssVarName(color, tertiary, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 第三颜色文字色，和背景色形成对比
    #{getCssVarName(color, tertiary, active)}: rgba(var(#{getCssVarName(grey, 7)}), 1); // 第三颜色激活态
    #{getCssVarName(color, tertiary, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 第三颜色文字色，和背景色形成对比
    #{getCssVarName(color, tertiary, light, default)}: rgba(var(#{getCssVarName(grey, 5) }),.2); // 浅版第三颜色（多用于背景），可以在页面上多次使用
    #{getCssVarName(color, tertiary, light, hover)}: rgba(var(#{getCssVarName(grey, 5) }),.3);  // 浅版第三颜色悬浮态
    #{getCssVarName(color, tertiary, light, active)}: rgba(var(#{getCssVarName(grey, 5) }),.4); // 浅版第三颜色激活态

    // 信息色
    #{getCssVarName(color, info)}: rgba(var(#{getCssVarName(blue, 5)}), 1); // 信息色, 通常用于表达客观、中立信息
    #{getCssVarName(color, info, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
    #{getCssVarName(color, info, hover)}: rgba(var(#{getCssVarName(blue, 6)}), 1); // 信息色悬浮态
    #{getCssVarName(color, info, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
    #{getCssVarName(color, info, active)}: rgba(var(#{getCssVarName(blue, 7)}), 1); // 信息色激活态
    #{getCssVarName(color, info, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
    #{getCssVarName(color, info, disabled)}: rgba(var(#{getCssVarName(blue, 2)}), 1); // 信息色禁用态
    #{getCssVarName(color, info, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
    #{getCssVarName(color, info, light, default)}: rgba(var(#{getCssVarName(blue, 5) }),.2); // 浅版信息色（多用于背景），通常用于表达客观、中立信息
    #{getCssVarName(color, info, light, hover)}: rgba(var(#{getCssVarName(blue, 5) }),.3); // 浅版信息色悬浮态
    #{getCssVarName(color, info, light, active)}: rgba(var(#{getCssVarName(blue, 5) }),.4);// 浅版信息色激活态

    // 成功色
    #{getCssVarName(color, success)}: rgba(var(#{getCssVarName(green, 5)}), 1); // 成功色，表示安全、成功、开启的状态
    #{getCssVarName(color, success, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
    #{getCssVarName(color, success, hover)}: rgba(var(#{getCssVarName(green, 6)}), 1); // 成功色悬浮态
    #{getCssVarName(color, success, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
    #{getCssVarName(color, success, active)}: rgba(var(#{getCssVarName(green, 7)}), 1); // 成功色激活态
    #{getCssVarName(color, success, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
    #{getCssVarName(color, success, disabled)}: rgba(var(#{getCssVarName(green, 2)}), 1); // 成功色禁用态
    #{getCssVarName(color, success, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
    #{getCssVarName(color, success, light, default)}: rgba(var(#{getCssVarName(green, 5) }),.2); // 浅版成功色（多用于背景），表示安全、成功、开启的状态
    #{getCssVarName(color, success, light, hover)}: rgba(var(#{getCssVarName(green, 5) }),.3); // 浅版成功色悬浮态
    #{getCssVarName(color, success, light, active)}: rgba(var(#{getCssVarName(green, 5) }),.4); // 浅版成功色激活态

    // 危险色
    #{getCssVarName(color, danger)}: rgba(var(#{getCssVarName(red, 5)}), 1); // 危险色，表示危险的操作、或需要特别注意的危险信息
    #{getCssVarName(color, danger, text)}: rgba(var(#{getCssVarName(white)}), 1); // 危险颜色文字色，和背景色形成对比
    #{getCssVarName(color, danger, hover)}: rgba(var(#{getCssVarName(red, 6)}), 1); // 危险色悬浮态
    #{getCssVarName(color, danger, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 危险颜色文字色，和背景色形成对比
    #{getCssVarName(color, danger, active)}: rgba(var(#{getCssVarName(red, 7)}), 1); // 危险色激活态
    #{getCssVarName(color, danger, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 危险颜色文字色，和背景色形成对比
    #{getCssVarName(color, danger, light, default)}: rgba(var(#{getCssVarName(red, 5) }),.2); // 浅版危险色（多用于背景），表示危险的操作、或需要特别注意的危险信息
    #{getCssVarName(color, danger, light, hover)}: rgba(var(#{getCssVarName(red, 5) }),.3); // 浅版危险色悬浮态
    #{getCssVarName(color, danger, light, active)}: rgba(var(#{getCssVarName(red, 5) }),.4); // 浅版危险色激活态

    // 警示色
    #{getCssVarName(color, warning)}: rgba(var(#{getCssVarName(orange, 5)}), 1); // 警示色，表示警告、不安全的状态
    #{getCssVarName(color, warning, text)}: rgba(var(#{getCssVarName(white)}), 1); // 警告颜色文字色，和背景色形成对比
    #{getCssVarName(color, warning, hover)}: rgba(var(#{getCssVarName(orange, 6)}), 1); // 警示色悬浮态
    #{getCssVarName(color, warning, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 警告颜色文字色，和背景色形成对比
    #{getCssVarName(color, warning, active)}: rgba(var(#{getCssVarName(orange, 7)}), 1); // 警示色激活态
    #{getCssVarName(color, warning, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 警告颜色文字色，和背景色形成对比
    #{getCssVarName(color, warning, light, default)}: rgba(var(#{getCssVarName(orange, 5) }),.2); // 浅版警示色（多用于背景），表示警告、不安全的状态
    #{getCssVarName(color, warning, light, hover)}: rgba(var(#{getCssVarName(orange, 5) }),.3); // 浅版警示色悬浮态
    #{getCssVarName(color, warning, light, active)}: rgba(var(#{getCssVarName(orange, 5) }),.4); // 浅版警示色激活态

    // 边框
    #{getCssVarName(color, focus, border)}: rgba(var(#{getCssVarName(blue, 5)}), 1); // 多用于边框激活态颜色

    // 禁用态
    #{getCssVarName(color, disabled, text)}: rgba(var(#{getCssVarName(grey, 9)}), .35); // 禁用态 - 文字
    #{getCssVarName(color, disabled, border)}: rgba(var(#{getCssVarName(grey, 1)}), 1); // 禁用态 - 描边
    #{getCssVarName(color, disabled, bg)}: rgba(var(#{getCssVarName(grey, 1)}), 1); // 禁用态 - 背景
    #{getCssVarName(color, disabled, fill)}: rgba(var(#{getCssVarName(grey, 8)}), .04); // 禁用态 - 填充
    #{getCssVarName(color, shadow)}: rgba(var(#{getCssVarName(black)}), .04); // 用于模拟描边的阴影颜色

    // 链接颜色
    #{getCssVarName(color, link)}: rgba(var(#{getCssVarName(blue, 5)}), 1); // 链接颜色
    #{getCssVarName(color, link, hover)}: rgba(var(#{getCssVarName(blue, 6)}), 1); // 链接颜色 - 悬浮态
    #{getCssVarName(color, link, active)}: rgba(var(#{getCssVarName(blue, 7)}), 1); // 链接颜色 - 激活态
    #{getCssVarName(color, link, visited)}: rgba(var(#{getCssVarName(blue, 5)}), 1); // 链接颜色 - 已访问
    #{getCssVarName(color, nav, bg)}:rgb(37 37 38 / 100%); // 导航背景色
    #{getCssVarName(shadow, elevated)}: inset 0 0 0 1px rgba(255 255 255 / 10%), 0 4px 14px rgba(0 0 0 / 25%); // 用于toast, modal, popover等需要提升层级的界面元素
    #{getCssVarName(color, overlay, bg)}: rgba(30 30 30 / 60%);  // 蒙层背景色

    // 填充色
    #{getCssVarName(color, fill, 0)}: rgba(var(#{getCssVarName(white)}), .12); // 填充色 - 默认态
    #{getCssVarName(color, fill, 1)}: rgba(var(#{getCssVarName(white)}), .16); // 填充色 - 悬浮态
    #{getCssVarName(color, fill, 2)}: rgba(var(#{getCssVarName(white)}), .20); // 填充色 - 激活态
    #{getCssVarName(color, scroll, menu)}: rgba(var(#{getCssVarName(white)}), .20); // 填充色 - 特殊-菜单滚动条颜色

    // 背景色
    #{getCssVarName(color, border)}: rgba(60 60 60 / 100%); // 背景色 - 最下层（底部页面）
    #{getCssVarName(color, bg, 0)}: rgba(30 30 30 / 100%); // 背景色 - 最下层（底部页面）
    #{getCssVarName(color, bg, 1)}: rgba(37 37 38 / 100%); // 背景色 - 次下层（页面中需要提升的内容）
    #{getCssVarName(color, bg, 2)}: rgba(51 51 51 / 100%); // 背景色 - 中间层（模态等容器）
    #{getCssVarName(color, bg, 3)}: rgba(60 60 60 / 100%); // 背景色 - 次上层（通知，Toast等）
    #{getCssVarName(color, bg, 4)}: rgba(79 81 89 / 100%); // 背景色 - 最上层（特殊）

    // 文本/图标颜色
    #{getCssVarName(color, text, 0)}: rgba(204 204 204 / 100%); // 文本/图标颜色 - 最主要
    #{getCssVarName(color, text, 1)}: rgba(197 197 197 / 100%); // 文本/图标颜色 - 稍次要
    #{getCssVarName(color, text, 2)}: rgba(204 204 204 / 60%); // 文本/图标颜色 - 次要
    #{getCssVarName(color, text, 3)}: rgba(255 255 255 / 40%); // 文本/图标颜色 - 最次要
    #{getCssVarName(color, text, menu)}: rgba(204 204 204 / 60%); // 文本 - 特殊-菜单颜色

    // 图标颜色
    #{getCssVarName(color, icon, 0)}: rgb(204 204 204 / 60%); // 图标颜色 - 最主要
    #{getCssVarName(color, icon, 1)}: rgb(204 204 204 / 60%); // 图标颜色 - 稍次要

    // 圆角
    #{getCssVarName(border,radius,extra,small)}: 0; // 超小圆角，用于 checkbox 内圆角
    #{getCssVarName(border,radius,small)}: 1px; // 小圆角, 用于 button、tag、tabs 等大多数组件, 比较常用
    #{getCssVarName(border,radius,medium)}: 2px; // 中圆角, 用于 dropdown、scrollist、transfer 等菜单类组件
    #{getCssVarName(border,radius,large)}: 4px; // 大圆角, 用于 modal
    #{getCssVarName(border,radius,circle)}: 50%; // 全圆角, 用于 avatar, badge 等组件
    #{getCssVarName(border,radius,full)}: 9999px; // 用于创建全尺寸圆角，如胶囊标签等

    // 高亮
    #{getCssVarName(color, highlight, bg)}: rgba(var(#{getCssVarName(yellow, 2)}), 1); // 高亮文本背景色
    #{getCssVarName(color, highlight)}: rgba(var(#{getCssVarName(white)}), 1); // 高亮文本色

    // 间距
    #{getCssVarName('spacing', 'none')}: 0;
    #{getCssVarName('spacing', 'super-tight')}: 1px;
    #{getCssVarName('spacing', 'extra-tight')}: 2px;
    #{getCssVarName('spacing', 'tight')}: 4px;
    #{getCssVarName('spacing', 'base-tight')}: 6px;
    #{getCssVarName('spacing', 'base')}: 8px;
    #{getCssVarName('spacing', 'base-loose')}: 10px;
    #{getCssVarName('spacing', 'loose')}: 12px;
    #{getCssVarName('spacing', 'extra-loose')}: 14px;
    #{getCssVarName('spacing', 'super-loose')}: 16px;

    // 标题
    #{getCssVarName('font-size', 'small')}: 11px;
    #{getCssVarName('font-size', 'regular')}: 13px;
    #{getCssVarName('font-size', 'header', 6)}: 16px;
    #{getCssVarName('font-size', 'header', 5)}: 18px;
    #{getCssVarName('font-size', 'header', 4)}: 20px;
    #{getCssVarName('font-size', 'header', 3)}: 22px;
    #{getCssVarName('font-size', 'header', 2)}: 24px;
    #{getCssVarName('font-size', 'header', 1)}: 28px;
}
  